import React from "react";
import { useDebounce, useDocumentTitle } from "utils";
import { List } from "./list";
import { SearchPanel } from "./search-panel";
import styled from "@emotion/styled";
import { Typography } from "antd";
import { useProjects } from "utils/use-projects";
import { useUsers } from "utils/User";
import { useUrlQueryParam } from "utils/url";
export const ProjectListScreen = () => {
  /**
   * 优化后 异步操作：使用useAsync来处理loading和error，指定data的类型时Project数组，将data重命名为list
   */
  // param是一个对象 用来查询
  // const [, setParam] = useState({
  //   name: "",
  //   personId: "",
  // });
  // const [keys] = useState<('name'|'personId')[]>(["name", "personId"] )
  const [param, setParam] = useUrlQueryParam(["name", "personId"]);
  // 使用debounce hook
  const debouncedParam = useDebounce(param, 300);
  // 将useAsync封装为useProjects、useUsers
  const { isLoading, error, data: list, retry} = useProjects(debouncedParam);
  const { data: users } = useUsers();
  // false表示页面卸载时还原为旧标题
  useDocumentTitle("项目列表", false);
  return (
    <Container>
      <h1>项目列表</h1>
      <SearchPanel users={users || []} param={param} setParam={setParam} />
      {/*  添加错误处理的用户提示 */}
      {error ? (
        <Typography.Text type="danger">{error.message}</Typography.Text>
      ) : null}
      {/* 把原来定义的list改为tableProps透传过来的dataSource */}
      <List refresh={retry} loading={isLoading} dataSource={list || []} users={users || []} />
    </Container>
  );
};
ProjectListScreen.whyDidYouRender = true;
const Container = styled.div`
  padding: 3.2rem;
`;
